import * as React from 'react';
import { SafeAreaView, StyleSheet, Text, View, FlatList, Image, ScrollView } from 'react-native';
import mallTypeListObj from '../modData/mallTypeList.tsx'

export default function CategoryList({navigation}) {
    const listData1 = mallTypeListObj.mallTypeLis01;
    const listData2 = mallTypeListObj.mallTypeLis02;
    const [selectType, setSelectType] = React.useState(listData1[0].id);

    const toggleItem = (item:any) => {
        console.log('item1', item);
        setSelectType(item.id);
    }

    const renderLItem = ({ item }) => {
        return (
            <Text style={item.id == selectType ? mallTypeMod.lItemSelect:mallTypeMod.lItem} onClick={() => toggleItem(item)}>
                {item.title}
            </Text>
        )
    };

    const skipToSearchPage = (item:any) => {
        console.log('item2', item, item.title);
        navigation.navigate('SearchList', {
            title: item.title,
        });
    };
    const renderRInter = (children:array) => {
        return (<View style={mallTypeMod.rItem2Box}>{children.map((item:any) => {
            return (<View style={mallTypeMod.rItem2} key={item.title} onClick={() => skipToSearchPage(item)}>
                    <Image
                        style={mallTypeMod.itemImage}
                        source={{
                            uri: item.image,
                        }}
                    />
                    <Text>{item.title}</Text>
                </View>);
        })}</View>);
    };

    return (
        <ScrollView>
            <View style={mallTypeMod.container}>
                <View style={mallTypeMod.lSide}>
                    <FlatList
                        data={listData1}
                        renderItem={renderLItem}
                        keyExtractor={item => item.id}
                    />
                </View>
                <View style={mallTypeMod.rSide}>
                    {listData2.map((item) => {
                        return (
                            <View key={item.id}>
                                <Text style={mallTypeMod.rItem1Title}>{item.title}</Text>
                                {renderRInter(item.data)}
                            </View>
                        );
                    })}
                </View>
            </View>
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    container: {
        display: 'flex',
        flexDirection: 'row',
    },
    lSide: {
        width: 86,
    },
    rSide: {
        flex: 1,
    },
});

const mallTypeMod = StyleSheet.create({
    container: {
        display: 'flex',
        flexDirection: 'row',
    },
    lSide: {
        width: 86,
    },
    lItem: {
        display: 'block',
        height: 46,
        lineHeight: 46,
        textAlign: 'center',
        backgroundColor: '#f8f8f8',
    },
    lItemSelect: {
        display: 'block',
        height: 46,
        lineHeight: 46,
        textAlign: 'center',
        backgroundColor: '#FFF',
        color: '#e93b3d',
    },
    rSide: {
        flex: 1,
        backgroundColor: '#FFF',
    },
    rItem1: {

    },
    rItem1Title: {
        display: 'block',
        fontWeight: 'bold',
        fontSize: 14,
        lineHeight: 40,
        paddingLeft: 20,
        paddingRight: 20,
        color: '#000',
    },
    rItem2Box: {
        display: 'flex',
        flexDirection: 'row',
        flexWrap: 'wrap',
        textAlign: 'center',
        paddingLeft: 20,
        paddingRight: 20,
        marginBottom: 20,
    },
    rItem2: {
        width: '33%',
    },
    itemImage: {
        width: 70,
        height: 70,
        marginLeft: 'auto',
        marginRight: 'auto',
    },
});
